<template>
  <Modal
    v-model="form.visible"
    :width="1000"
    :mask-closable="false"
    :loading="loading"
    :title="form.data.pkInitial ? '活动报名列表' : '活动报名列表'"
    ok-text="确定"
    @on-ok="ok">
    <card>
      <Input v-model="query.realName" placeholder="请输入姓名" style="width: 200px"></Input>
      <Select v-model="query.pkActGroup" style="width: 150px" placeholder="请选择组别">
        <Option :value="''" :key="''" selected>全部组别</Option>
        <Option
          v-for="item in actGroupList"
          :key="item.pk_act_group"
          :value="item.pk_act_group">{{ item.group_name }}</Option>
      </Select>
      <Button type="primary" class="mr10" @click="search()">查询</Button>
    </card>

    <Table
        :columns="columns"
        :data="list"
        no-data-text="该查询条件没有任何数据"
        class="mt20">
      </Table>

      <div class="m10 clearfix" v-if="page.total > 0">
        <div class="fr">
          <Page
            show-total
            :total="page.total"
            :current="query.currentPage"
            @on-change="onChangePage">
          </Page>
        </div>
      </div>

    <div slot="footer">
      <Button @click="closeModal(false)">取消</Button>
      <Button type="primary" @click="ok">确定结束活动</Button>
    </div>
  </Modal>
</template>

<script>
  import { mapGetters } from 'vuex'
  import activityApi from '@/api/activity'

  export default {
    name: 'end-modal',
    props: [
      'form'
    ],
    components: {
    },
    data () {
      return {
        loading: true,
        ruleValidate: {
        },
        query: {
          currentPage: 1,
          payStatus: 0,
          revokeSignUp: -1,
          limit: 10
        },
        page: {
          total: 0
        },
        columns: [
          {
            title: '序号',
            width: 50,
            render: (h, params) => {
              return (this.query.currentPage - 1) * this.query.limit + params.row._index + 1
            }
          },
          {
            title: '姓名',
            width: 80,
            key: 'realName'
          },
          {
            title: '昵称',
            width: 80,
            key: 'nickName'
          },
          {
            title: '性别',
            key: 'sexName'
          },
          {
            title: '手机号',
            key: 'mobile'
          },
          {
            title: '报名组别',
            key: 'groupName'
          },
          {
            title: '俱乐部',
            key: 'signRclubName'
          }
        ],
        list: []
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo'
      })
    },
    watch: {
      'form.visible': 'onClose'
    },
    methods: {
      onChangePage (currentPage) {
        this.query.currentPage = currentPage
      },
      onClose (isVisible) {
        if (!isVisible) {
          this.form.data = {}
        } else {
          this.getList()
          this.getActGroupList()
        }
      },
      ok () {
        this.$Modal.confirm({
          title: '确认结束活动吗',
          content: '<p>结束后将不能恢复，确定结束？</p>',
          onOk: () => {
            this.submitForm()
          }
        })
      },
      search () {
        this.query.currentPage = 1
        this.getList()
      },
      async getList (query) {
        this.query.pkActBaseInfo = this.form.pkActBaseInfo
        const { body } = await activityApi.signup.list(this.query)
        const { responseData } = body
        this.list = responseData.content
        this.page.total = responseData.totalElements
      },
      async getActGroupList () {
        this.loading = true
        const { body } = await activityApi.group.listNoPage({
          pk_act_base_info: this.form.pkActBaseInfo
        })
        const { responseData } = body
        this.loading = false
        this.actGroupList = responseData
      },
      closeModal () {
        this.form.visible = false
      },
      async submitForm () {
        const { body } = await activityApi.info.end({ pkInitial: this.form.pkInitial })
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.$Message.info('结束成功')
          this.getList()
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
        this.form.visible = false
        this.$emit('submit')
      },
      onUpdateShow () {
      }
    },
    async mounted () {
    }
  }
</script>

<style lang="less" scoped>
  .ivu-radio-group-button.ivu-radio-group-large .ivu-radio-wrapper {
    font-size: 16px;
  }

  .step-1 {
    .step-1-con {
      margin: 10px;
      padding: 10px;
      height: 400px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
  }

  .step-2 {
  }
</style>
